<template>
  <el-container>
    <el-header class="auto">
      <el-button type="primary" icon="el-icon-circle-plus" @click="addNewConsumer" style="margin: 10px;">新增</el-button>
      <!--搜索框-->
      <el-form :inline="true" :model="input" class="demo-form-inline" style="text-align: left;">

        <el-form-item label="客户账号">
          <el-input v-model="input.account" placeholder="客户账号"></el-input>
        </el-form-item>

        <el-form-item label="客户简称">
          <el-input v-model="input.short_name" placeholder="客户简称"></el-input>
        </el-form-item>

        <el-form-item label="客户名称">
          <el-input v-model="input.name" placeholder="客户名称"></el-input>
        </el-form-item>

        <el-form-item label="客户状态">
          <el-select v-model="input.status" placeholder="请选择">
            <el-option
              v-for="(item,k) in status_list"
              :key="k"
              :label="item"
              :value="k">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getList">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        :data="ticketList"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="客户名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="account"
          label="客户账号">
        </el-table-column>

        <el-table-column
          prop="short_name"
          label="客户简称">
        </el-table-column>

        <el-table-column
          label="客户状态">
          <template slot-scope="scope">
            {{status_list[scope.row.status]}}
          </template>
        </el-table-column>

        <el-table-column
          prop="create_user"
          label="创建人员">
        </el-table-column>

        <el-table-column
          prop="created_at"
          label="创建时间">
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">

            <div class="frow fcenter" style="align-items: flex-end;">
              <div> <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button></div>
              <div style="margin-left: 10px;"><el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button></div>
            </div>
          </template>
        </el-table-column>

      </el-table>

      <el-footer>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="input.page"
          :page-sizes="[10,20,30]"
          :page-size="input.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="ticketTotal">
        </el-pagination>
      </el-footer>
    </el-main>

    <!--对话框form-->
    <el-dialog title="新增客户" :visible.sync="dailog" >
      <el-form :model="form">

        <el-form-item label="公司简称" :label-width="formLabelWidth">
          <el-input v-model="form.short_name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="客户公司" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="客户税号" :label-width="formLabelWidth">
          <el-input v-model="form.batch_id" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="客户地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="客户电话" :label-width="formLabelWidth">
          <el-input v-model="form.mobile" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="客户开户行" :label-width="formLabelWidth">
          <el-input v-model="form.bank" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="客户账号" :label-width="formLabelWidth">
          <el-input v-model="form.account" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="银行行号" :label-width="formLabelWidth">
          <el-input v-model="form.bank_number" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="客户状态" :label-width="formLabelWidth" style="text-align: left;">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option label="正常" value="1"></el-option>
            <el-option label="禁止" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dailog = false">取 消</el-button>
        <el-button type="primary" @click="addTicket">确 定</el-button>
      </div>
    </el-dialog>
    <!--end 对话框form-->

    <!-- 删除弹窗-->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <span>确认删除?</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="cancelEdit()">取 消</el-button>
    <el-button type="danger" @click="delTicket">确 定</el-button>
  </span>
    </el-dialog>
    <!-- 删除弹窗-->

  </el-container>
</template>

<script>
    import {mapState,mapActions} from 'vuex'
    import {addTicket} from '@/apilist/SystemSetting'
    import {delFaPiao} from '@/apilist/Finance'
    export default {
        name: "setConsumer",
        data(){
            return {
                dailog: false,
                input: {
                    account: "",
                    short_name: "",
                    name: '',
                    bank: '',
                    status: '',
                    is_list: 1,
                    page: 1,
                    page_size: 10,
                },
                status_list: ['禁用','启用'],
                formLabelWidth: '120px',
                form: {
                    name:'',
                    account: '',
                    batch_id: '',
                    short_name: '',
                    bank: '',
                    bank_number: '',
                    address: '',
                    status: 0,
                    id: 0,
                    mobile: '',
                },
              centerDialogVisible: false,
              delTicketId: 0,
            }
        },
        computed: {
            ...mapState("Setdata",["ticketList","ticketTotal"]),
        },

        methods: {
            ...mapActions("Setdata",["getTicketListAction"]),
            //获取列表
            getList(){
                this.getTicketListAction(this.input)
            },
            //编辑客户
            handleEdit(index,row){
                this.form.name = row.name
                this.form.account = row.account
                this.form.batch_id = row.batch_id
                this.form.short_name = row.short_name
                this.form.bank = row.bank
                this.form.bank_number = row.bank_number
                this.form.address = row.address
                this.form.status = row.status.toString()
                this.form.id = row.id
                this.form.mobile = row.mobile
                this.dailog = true
            },
            //删除客户
            handleDelete(index,row){
              this.centerDialogVisible = true;
              this.delTicketId = row.id;
            },
            //处理分页
            handleSizeChange(pageNumber){
                this.input.page_size = pageNumber
                this.getList()
            },
            handleCurrentChange(page){
                this.input.page = page
                this.getList()
            },
            addTicket(){
                addTicket(this.form).then(res => {
                    this.$message.success(res.msg)
                    this.dailog = false
                    this.getList()
                })
            },

            addNewConsumer(){
                this.form.name = ''
                this.form.account = ''
                this.form.batch_id = ''
                this.form.short_name = ''
                this.form.bank = ''
                this.form.bank_number = ''
                this.form.address = ''
                this.form.status = 0
                this.form.id = 0
                this.form.mobile = ''
                this.dailog = true
            },

          //删除发票
          delTicket(){
           if(this.delTicketId){
             delFaPiao({id: this.delTicketId}).then(res => {
             if(res.state == 'ok'){
               this.$message({
                 type:'success',
                 message: '删除成功',
                 onClose: ()=>{
                   this.centerDialogVisible = false;
                 }
               });
             }else{
               this.$message.error('删除失败');
             }
             })
           }
          },
          cancelEdit(){
            console.log(11222)
            this.centerDialogVisible = false;
            this.$forceUpdate();
          },
        },
    }
</script>

<style scoped>

</style>
